<template>
  <div class="content-wrapper">
    <div class="ellipse"></div>
    <div class="content">
      <div class="author">
        <img :src="this.userInfo.avatar"
             alt="">
      </div>
      <div class="user-name">
        <p class="name">{{this.userInfo.userName}}</p>
        <p class="phone"></p>
      </div>
      <div class="section-warp">
        <div class="section">
          <router-link class="collect section-icon"
                       to="/me/collect"
                       tag="div">
            <div class="iconfont icon">&#xe648;</div>
            <p class="desc">收藏</p>
          </router-link>
          <router-link class="evaluate section-icon"
                       to="/me/evaluate"
                       tag="div">
            <div class="iconfont icon">&#xe6b8;</div>
            <p class="desc"
               to="/me/evaluate">评价</p>
          </router-link>
          <router-link class="history section-icon"
                       to="/me/footmark"
                       tag="div">
            <div class="iconfont icon">&#xe638;</div>
            <p class="desc">足迹</p>
          </router-link>
        </div>
      </div>
      <div class="section-warp">
        <div class="title">大微</div>
        <div class="section">
          <router-link class="card section-icon"
                       to="/me/vcard"
                       tag="div">
            <div class="iconfont icon">&#xe68b;</div>
            <p class="desc">大微卡券</p>
          </router-link>
        </div>
      </div>
      <div class="section-warp">
        <div class="title">大微服务</div>
        <div class="section">
          <!-- <router-link class="cooperation section-icon"
                       to="/me/join"
                       tag="div">
            <div class="iconfont icon">&#xe640;</div>
            <p class="desc">我要合作</p>
          </router-link> -->
          <router-link class="about section-icon"
                       to="/me/about"
                       tag="div">
            <div class="iconfont icon">&#xe99a;</div>
            <p class="desc">关于大微</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MeContent',
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.content-wrapper
  width 100%
  height calc(100% -10px)
  margin-top 74px
  position relative

  .vip
    position absolute
    top -70px
    right 30px
    width 50px
    text-align center

    .icon
      font-size $largeFz
      color #fff

  .ellipse
    position absolute
    top 0
    left 50%
    transform translateX(-50%)
    width 1220px
    height 430px
    background-color #fff
    border-radius 50% / 50%
    z-index 1

  .content
    position absolute
    top 215px
    bottom 0
    right 0
    left 0
    z-index 2
    background-color $bgcWh

    .author
      position absolute
      top -270px
      left 50%
      transform translateX(-50%)
      width 119px
      height 119px
      border-radius 50%
      border 3px solid #8C665B
      background-position center center
      background-repeat no-repeat
      background-size 130px 130px

      img
        border-radius 50%

    .user-name
      position absolute
      top -138px
      left 50%
      transform translateX(-50%)
      width 200px
      text-align center

      .name
        font-size $fzSecond
        color $fzColor
        line-height 46px
        ellipsis()

      .phone
        font-size $smallFz
        color $fzColor
        line-height 34px

    .title
      font-size $fzSecond
      color $fzColor
      font-weight 700
      line-height 58px
      margin-bottom 8px
      text-indent 20px

    .section
      display flex
      padding()
      margin-bottom 58px
      justify-content space-between
      align-items center

      .section-icon
        width 33.3333%
        display flex
        flex-direction column
        justify-content center
        align-items center

        .icon
          margin-bottom 20px
          font-size 44px

        .desc
          font-size $fzFifth
          color $grayOne

        line-height 34px

      .collect
        .icon
          color #F44336

      .evaluate
        .icon
          color #FFA90B

      .history
        .icon
          color #4259DB

      .discounts
        .icon
          color #5DCA38

      .card
        .icon
          color #0080DB

      .share
        .icon
          color #4259DB

      .cooperation, .about, .commercial-tenant
        .icon
          color $graySecond
</style>
